// 导航栏的移入移出变化
$('.clothing_nav .nav_a').hover(function () {
    $(this).addClass('active_nava')
}, function () {
    $(this).removeClass('active_nava')
})
// 轮播图
function moveAnimation2(ele, target) {
    // 使用DOM元素,用定时的id值来添加DOM元素属性
    clearInterval(ele.interId);
    // 获取定时器的id
    ele.interId = setInterval(function () {
        if (ele.offsetLeft == target) {
            clearInterval(ele.interId);
        } else {
            // 向右走向左走
            var slowStep = (target - ele.offsetLeft) / 10;
            // 向右走
            // 500  0  500/10  50
            // 500  50  450/10  45
            // 500  95   40.5 
            // 500 496    0.4---1
            // 向左走
            // -0.5 ---- -1
            // 整数值
            slowStep = slowStep > 0 ? Math.ceil(slowStep) : Math.floor(slowStep);
            // 496 0.4
            ele.style.left = ele.offsetLeft + slowStep + 'px';
        }
    }, 20);
};


var showslide1 = document.querySelector('.showslide1');
var runs = document.querySelectorAll('.runs');
var run;

function autoplay() {
    var flag = 1;
    run = setInterval(function () {
        if (flag == runs.length) {
            flag = 0;
        }
        for (var j = 0; j < runs.length; j++) {
            runs[j].className = 'runs';
        }
        runs[flag].className = 'runs runshow';
        var target = flag * (-950);
        moveAnimation2(showslide1, target);
        flag++;

    }, 2000);
};
autoplay();
$('.runs').hover(function () {
    clearInterval(run);
    $(this).addClass('runshow').siblings().removeClass('runshow');
    var target = $(this).index() * (-950);
    moveAnimation2(showslide1, target);
}, function () {
    autoplay();
})

// 二级导航
$('.content_list ul li').hover(function () {
    $(this).addClass('li_bg');
    $('.content_list_nav').eq($(this).index()).css('display', 'block')
}, function () {
    $(this).removeClass('li_bg');
    $('.content_list_nav').eq($(this).index()).css('display', 'none')
})

// 服装区域
// 渲染数据
function show(obj1, obj2, obj3) {
    obj1.mouseover(function () {
        $(this).addClass('yuankuang').siblings().removeClass('yuankuang');
        var index = $(this).index();
        var obj = obj3[index];
        var showDatas = '';
        for (var i = 0; i < obj.length; i++) {
            showDatas += `
            <li>
                <div class="p_img">
                   <img src="${obj[i].goodurls.nowurl}" alt="">
                </div>
                <div class="p_name">
                    <a href="#">${obj[i].goodtitle}</a>
                </div>
                <div class="p_price">￥${obj[i].goodprice}</div>
            </li> `;
        }
        obj2.html(showDatas);
    });
}
// 初始化数据
function initData(obj1, obj2) {
    var obj = obj2[0];
    var showDatas = '';
    for (var i = 0; i < obj.length; i++) {
        showDatas += `
            <li class='goDetail' >
            <a href='javascript:;'>
                <div class="p_img">
                   <img src="${obj[i].goodurls.nowurl}" alt="">
                </div>
                <div class="p_name">
                    <a href="#">${obj[i].goodtitle}</a>
                </div>
                <div class="p_price">￥${obj[i].goodprice}</div>
            </a>
            </li> `;
    }
    obj1.html(showDatas);
}

// 女装区
initData($('.nv_xr_ul'), data.clothesData.girlclothes);
show($('.nv_hd_r li'), $('.nv_xr_ul'), data.clothesData.girlclothes);
// 男装区
initData($('.nan_xr_ul'), data.clothesData.boyclothes);
show($('.nan_hd_r li'), $('.nan_xr_ul'), data.clothesData.boyclothes);
// 服饰配件区
initData($('.fs_xr_ul'), data.clothesData.peijian);
show($('.fs_hd_r li'), $('.fs_xr_ul'), data.clothesData.peijian);
// 内衣区
initData($('.ny_xr_ul'), data.clothesData.neiyi);
show($('.ny_hd_r li'), $('.ny_xr_ul'), data.clothesData.neiyi);
// 运动户外区
initData($('.yd_xr_ul'), data.clothesData.sport);
show($('.yd_hd_r li'), $('.yd_xr_ul'), data.clothesData.sport);




// 随手购数据渲染

var obj = data.clothesData.suibian;
var showDatas = '';
for (var i = 0; i < obj.length; i++) {
    showDatas += `
    <li>
    <div class="p_img">
        <img src="${obj[i].goodurls.nowurl}" alt="">
    </div>
    <div class="p_price">￥${obj[i].goodprice}</div>
    <div class="p_name">
        <a href="#">${obj[i].goodtitle}</a>
    </div>
    <div class="p_bt"><a href="">查看详情</a></div>
    </li>`
}
$('.cont_warp ul').html(showDatas);

//随手购轮播图
//随手购小圆点切换样式
$('.gou_dot li').hover(function () {
    $(this).addClass('on').siblings().removeClass('on');
    var index = $(this).index() * -1200;
    $('.cont_warp ul').css('left', index);
    $('.jt_left,.jt_right').stop().show();
}, function () {
    $('.jt_left,.jt_right').stop().hide();
})

$('.shopping_cont').hover(function () {

    $('.jt_left,.jt_right').stop().show();
    var target = parseInt($('.cont_warp ul').position().left);
    var index = 0;
    //点击左箭头
    $('.jt_left').click(function () {
        index--;
        if (index < 0) {
            index = 0;
        }
        $('.gou_dot li').eq(index).addClass('on').siblings().removeClass('on');
        target += 1200;
        if (target > 0) {
            target = 0;
        }
        $('.cont_warp ul').css('left', target);
    })
    $('.jt_right').click(function () {
        index++;
        if (index > 2) {
            index = 2;
        }
        $('.gou_dot li').eq(index).addClass('on').siblings().removeClass('on');
        target -= 1200;
        if (target < -2400) {
            target = -2400;
        }
        $('.cont_warp ul').css('left', target);
    })
}, function () {
    $('.jt_left,.jt_right').stop().hide();
})


//滑动条导航
var main = $('.time_show').offset().top;
$(window).scroll(function () {
    if ($(window).scrollTop() > main) {
        $('.capatop_list').fadeIn(600);
    } else {
        $('.capatop_list').fadeOut(600);
    }
    $('.main_action').children().each(function (index, value) {
        if ($(window).scrollTop() >= value.offsetTop) {
            $('.list_son').eq(parseInt(index / 2)).addClass('oon').siblings().removeClass('oon');
        }
    })
    $('.list_son').click(function () {
        $(this).addClass('oon').siblings().removeClass('oon');
        var index = $(this).index() * 2;
        $(window).scrollTop($('.main_action').children().eq(index).offset().top);
    })
})

$('.list_jt').click(function () {
    $(window).scrollTop(0);
})


